<template>
  <div class="wh-use" ref="triggerDom" :class="{ active: isStart, out: !isStart }">
    <h3 class="fs48 pb45">和他们一起使用云译通</h3>
    <p class="fs24 pb53">覆盖军事、法律、教育、房地产、金融、电商、互联网等20多个行业</p>
    <div class="solve">了解行业解决方案<span></span></div>
    <div class="company-logo">
      <ul
        class="company-logo-list mb50"
        ref="companyListTopDom"
        :style="{ transform: `translateX(${-companyTopTranslate}px)` }"
      >
        <li>
          <img src="../../assets/images/home/company01.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company02.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company03.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company04.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company05.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company06.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company07.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company08.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company09.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company10.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company11.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company12.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company01.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company02.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company03.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company04.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company05.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company06.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company07.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company08.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company09.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company10.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company11.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company12.png" alt="company-logo" />
        </li>
      </ul>
      <ul
        class="company-logo-list"
        ref="companyListBottomDom"
        :style="{ transform: `translateX(${companyBottomTranslate}px)` }"
      >
        <li>
          <img src="../../assets/images/home/company01.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company02.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company03.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company04.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company05.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company06.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company07.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company08.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company09.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company10.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company11.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company12.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company01.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company02.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company03.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company04.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company05.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company06.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company07.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company08.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company09.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company10.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company11.png" alt="company-logo" />
        </li>
        <li>
          <img src="../../assets/images/home/company12.png" alt="company-logo" />
        </li>
      </ul>
    </div>
    <div class="slider" @mouseleave="autoPlaySlider" @mouseenter="handleClear">
      <div class="prev" @click="handleSliderMove(false)">
        <span class="prev"></span>
      </div>
      <ol>
        <li :style="sliderStyle">
          <div class="pic">
            <img src="../../assets/images/home/slider01.jpg" alt="slider" />
          </div>
          <div class="content">
            <p>
              云译通与我行信息服务系统的深度融合，在云译通的帮助下，大幅度提升了我行实时获取全球财经动态的效率，优化了我行与全国各分支机构之间的财经信息共享渠道。相信在云译通的赋能下，我行的金融服务水平将持续向好发展。
            </p>
            <img src="../../assets/images/home/company05.png" alt="logo" />
          </div>
        </li>
        <li :style="sliderStyle">
          <div class="pic">
            <img src="../../assets/images/home/slider02.jpg" alt="slider" />
          </div>
          <div class="content">
            <p>
              “每年，全校需要做学术论文发表的师生有成千上万人，完成论文翻译和审校需要花费很长的时间和成本。云译通为我校定制开发学术论文在线翻译工具后，我校外文期刊文献等使用率大幅提升，科研成果产出能力也得到有效增强。”
            </p>
            <img src="../../assets/images/home/company06.png" alt="logo" />
          </div>
        </li>
        <li :style="sliderStyle">
          <div class="pic">
            <img src="../../assets/images/home/slider03.jpg" alt="slider" />
          </div>
          <div class="content">
            <p>
              云译通是高校值得信赖的伙伴，应用新的神经机器翻译和人工智能技术，满足各种专业学科和复杂文档的术语要求，广泛适用于科研论文、学术文献翻译、会议PPT翻译、课件翻译、培训教材翻译等场景。
            </p>
            <img src="../../assets/images/home/company11.png" alt="logo" />
          </div>
        </li>
      </ol>
      <div class="next" @click="handleSliderMove(true)">
        <span></span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useScroll } from '@/hooks'

const sliderIndex = ref<number>(0)
const sliderTimer = ref<ReturnType<typeof setTimeout>>()
const companyTopTranslate = ref<number>(0)
const companyBottomTranslate = ref<number>(0)
const companyListTopDom = ref<HTMLElement>()
const companyListBottomDom = ref<HTMLElement>()

const sliderStyle = computed(() => {
  return {
    transform: `translateX(${-sliderIndex.value * 100}%)`
  }
})

const { triggerDom, isStart } = useScroll()

const handleSliderMove = (isNext: boolean = true) => {
  if (isNext) {
    sliderIndex.value++
    if (sliderIndex.value > 2) sliderIndex.value = 0
  } else {
    sliderIndex.value--
    if (sliderIndex.value < 0) sliderIndex.value = 2
  }
}

const handleClear = () => {
  sliderTimer.value && clearTimeout(sliderTimer.value)
}

const autoPlaySlider = () => {
  handleClear()
  sliderTimer.value = setTimeout(() => {
    handleSliderMove()
    autoPlaySlider()
  }, 3000)
}

const handleCompanyMove = () => {
  setTimeout(() => {
    if (!companyListTopDom.value || !companyListBottomDom.value) return
    companyTopTranslate.value++
    companyBottomTranslate.value++
    if (companyTopTranslate.value >= companyListTopDom.value.scrollWidth / 2 + 40) {
      companyTopTranslate.value = 0
    }
    if (companyBottomTranslate.value >= companyListTopDom.value.scrollWidth / 2 + 40) {
      companyBottomTranslate.value = 0
    }
    handleCompanyMove()
  }, 1000 / 120)
}

onMounted(() => {
  handleCompanyMove()
  autoPlaySlider()
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/base.scss';

.wh-use {
  width: 100%;
  height: 1100px;
  padding-top: 144px;
  box-sizing: border-box;
  text-align: center;
  background: url('../../assets/images/home/use-bg.png') no-repeat center -10px;

  &.active {
    h3,
    p,
    .solve {
      transform: translateY(0);
      opacity: 1;
    }

    h3 {
      transition: all 1s $cubic;
    }

    p {
      transition: all 1s 0.3s $cubic;
    }

    .solve {
      transition: all 1s 0.6s $cubic;
    }
  }

  &.out {
    h3,
    p,
    .solve {
      transform: translateY(40px);
      opacity: 0;
    }

    h3 {
      transition: all 1s 0.6s $cubic;
    }

    p {
      transition: all 1s 0.3s $cubic;
    }

    .solve {
      transition: all 1s $cubic;
    }
  }

  h3,
  p,
  .solve {
    transform: translateY(40px);
    opacity: 0;
  }

  .solve {
    display: inline-flex;
    font-size: 24px;
    font-weight: 100;
    color: #1f86ff;
    margin-bottom: 115px;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
      > span {
        width: 30px;
      }
    }

    > span {
      margin-left: 7px;
      display: inline-block;
      width: 16px;
      height: 2px;
      background-color: #1f86ff;
      position: relative;
      transition: all 1s;

      &::before,
      &::after {
        content: '';
        width: 10px;
        height: 2px;
        background-color: #1f86ff;
        position: absolute;
        right: 0;
        top: 50%;
        transform-origin: right center;
        transform: translateY(-50%) rotateZ(45deg);
      }

      &::after {
        transform: translateY(-50%) rotateZ(-45deg);
      }
    }
  }

  > .company-logo {
    width: 100vw;
    overflow: hidden;

    > .company-logo-list {
      height: 50px;
      display: flex;
      justify-content: flex-start;

      &:last-of-type {
        justify-content: flex-end;

        > li {
          margin-right: 0;
          margin-left: 80px;
        }
      }

      > li {
        height: 50px;
        width: 120px;
        min-width: 120px;
        margin-right: 80px;

        > img {
          width: 100%;
          height: 100%;
          //object-fit: fill;
          background-color: #fff;
          clip-path: inset(2px 2px 2px 2px round 0px);
        }
      }
    }
  }

  > .slider {
    width: 1200px;
    height: 290px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 80px auto 120px;

    > .prev,
    > .next {
      width: 57px;
      height: 57px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &:hover {
        background-color: #f6f8f9;
      }

      > span {
        margin-left: 7px;
        display: inline-block;
        width: 3px;
        position: relative;

        &.prev {
          &::before,
          &::after {
            transform-origin: left center;
          }
        }

        &::before,
        &::after {
          content: '';
          width: 10px;
          height: 2px;
          background-color: #000;
          position: absolute;
          right: 0;
          top: 50%;
          transform-origin: right center;
          transform: translateY(-50%) rotateZ(45deg);
        }

        &::after {
          transform: translateY(-50%) rotateZ(-45deg);
        }
      }
    }

    > ol {
      width: 1008px;
      height: 290px;
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      box-shadow: -1px 7px 42px 1px rgba(168, 188, 217, 0.19);

      > li {
        min-width: 100%;
        height: 290px;
        background-color: #fff;
        transition: all 1s;
        display: flex;

        &:nth-of-type(2) > .pic img {
          transform: scale(1.1);
        }

        > .pic {
          width: 290px;
          min-width: 290px;
          height: 290px;
          overflow: hidden;

          > img {
            width: 290px;
            min-width: 290px;
            height: 290px;
            object-fit: cover;
          }
        }

        > .content {
          padding: 50px 56px 0;

          font-size: 18px;
          line-height: 32px;
          text-align: left;

          > img {
            position: absolute;
            right: 52px;
            bottom: 35px;
            height: 60px;
            object-fit: contain;
            clip-path: inset(3px 3px 3px 3px round 0px);
          }
        }
      }
    }
  }
}
</style>
